<template>
  <data-table-app-page>
    <el-form slot="toolbar" inline :model="searchForm">
      <el-form-item label="工单编号">
        <el-input v-model.trim="searchForm.orderno" clearable style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="工单状态">
        <type-select
          v-model="searchForm.statuses"
          :items="statusItems"
          style="width: 130px"
        />
      </el-form-item>
      <el-form-item label="线上/线下">
        <type-select
          v-model="searchForm.lineState"
          :items="[{text: '线上', value: 1}, {text: '线下', value: 0}]"
          style="width: 130px"
        />
      </el-form-item>
      <el-form-item label="下单人">
        <el-input
          v-model="creatorName"
          clearable
          style="width: 100px"
          @focus="onCreatorNameInputFocus"
          @clear="creatorName = '', searchForm.creator = null"></el-input>
      </el-form-item>
      <el-form-item label="行业">
        <type-select
          v-model="searchForm.industryId"
          :items="DictMan.items('product.industry')"
          style="width: 110px"
        />
      </el-form-item>
      <el-form-item label="下单日期">
        <el-date-picker
          v-model="searchForm.createTimes"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          style="width: 320px"
        />
      </el-form-item>
      <el-form-item>
        <data-table-query-button
          :query-params="getQueryParams" />
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      url="/api/shop/order/orderPage"
      lazy
      timing
    >
      <el-table-column prop="orderno" label="工单编号" width="190"></el-table-column>
      <el-table-column prop="status" label="工单状态" width="100" v-slot="{row}">
        <status-tag :status="row.status" type="service" />
      </el-table-column>
      <el-table-column prop="payStatus" label="支付状态" width="90" v-slot="{row}">
        <pay-status-tag :status="row.payStatus" />
      </el-table-column>
      <el-table-column prop="lineState" label="线上下" width="70" :formatter="formatters.lineState"></el-table-column>
      <el-table-column prop="providerName" label="商家店铺" width="240" show-overflow-tooltip></el-table-column>
      <el-table-column prop="industryId" label="行业" width="80" :formatter="formatters.industryId"></el-table-column>
      <el-table-column prop="creatorName" label="下单人" width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="creatorOrgName" label="下单人社区" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" label="下单时间" width="152"></el-table-column>
      <el-table-column label="操作" min-width="164" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="warning"
            plain
            @click="onDetailsClick(scope.row)">详情</el-button>
          <el-button
            :disabled="!(scope.row.longitude && scope.row.latitude)"
            type="primary"
            plain
            icon="el-icon-location"
            @click="onLocationClick(scope.row)">定位</el-button>
        </template>
      </el-table-column>
    </data-table>
    <user-query-selector ref="userQuerySelector" />
  </data-table-app-page>
</template>

<script>
import StatusTag from '../StatusTag';
import PayStatusTag from '../PayStatusTag';

export default {
  pageProps: {
    title: '服务工单'
  },
  components: {
    StatusTag,
    PayStatusTag,
    UserQuerySelector: () => import('@/pages/user/UserQuerySelector.vue')
  },
  data() {
    return {
      formatters: {
        lineState: (row, col, val) => val ? '线上' : '线下',
        industryId: (row, col, val) => DictMan.itemMap('product.industry')[val]
      },
      creatorName: null,
      searchForm: {
        creator: null,
        industryIds: "'mall','activity','catering','housekeeping'",
        ...this.$params.query
      },
      statusItems: StatusTag.serviceOrderStatusItems
    };
  },
  mounted() {
    this.$refs.table.query(this.getQueryParams());
  },
  methods: {
    getQueryParams() {
      let queryParams = {...this.searchForm};
      queryParams = {
        ...queryParams,
        ...(queryParams.createTimes ? {
            startCreateTime: queryParams.createTimes[0],
            endCreateTime: queryParams.createTimes[1]
          } : {})
      };
      delete queryParams.createTimes;
      return queryParams;
    },
    onCreatorNameInputFocus() {
      this.searchForm.creator = null;
      this.creatorName = null;
      this.$refs.userQuerySelector.show({
        onOk: (user) => {
          this.searchForm.creator = user.id;
          this.creatorName = user.realName || user.aliasName;
          return true;
        }
      });
    },
    onDetailsClick(order) {
      this.pushPage({
        path: '/shop/order/details',
        params: {
          order,
          type: 'service',
          statusMap: this.statusMap,
          onDeleteSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        },
        key: order.orderno
      });
    },
    onLocationClick({orderno}) {
      if (getModuleContext('shop.orderLocation') && getModuleContext('shop.orderLocation').isCreated()) {
          openModuleByCode('shop.orderLocation');
          getModuleContext('shop.orderLocation').gotoOrder(orderno);
      } else {
        openModuleByCode('shop.orderLocation', {onLoad: function() {
          getModuleContext('shop.orderLocation').gotoOrder(orderno);
        }});
      }
    } 
  }
}
</script>